<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="计费项目查看">
        <el-form ref="form" :model="form" label-width="130px">
          <el-form-item label="计费项目名称：">
            <span>{{ form.payname }}</span>
          </el-form-item>
          <el-form-item label="项目优先级：">
            <span>{{ form.paylevel }}</span>
          </el-form-item>
          <el-form-item label="项目用量/时长：">
            <span>{{ form.paynum }}</span>
          </el-form-item>
          <el-form-item label="项目价格：">
            <span>{{ form.paymoney }}</span>
          </el-form-item>
          <el-form-item label="通知状态：">
            <span>{{ form.paystatus }}</span>
          </el-form-item>
          <el-form-item label="通知人：">
            <span>{{ form.username }}</span>
          </el-form-item>
          <el-form-item label="通知内容：">
            <span v-html="form.paycontent"></span>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="btn-box">
      <el-button type="primary" size="small" @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "带你飞",
      },
      token: localStorage.getItem("token"),
    };
  },
  created() {
    this.drawing();
  },
  methods: {
    // 渲染
    drawing() {
      this.$axios({
        url: "/cost/getCostDetail",
        method: "GET",
        params: {
          token: this.token,
          id: this.$route.query.id,
        },
      }).then((res) => {
        console.log(res);
        this.form = res.data[0];
        if (res.data[0].paystatus == 1) {
          this.form.paystatus = "已通知";
        } else {
          this.form.paystatus = "未通知";
        }
      });
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.btn-box {
  position: fixed;
  top: 30%;
  right: 1%;
}
</style>